<template>
    <div class="divcontainer">
        <div class="divcontainer_sub1">
        <span class="divcontainer_sub2">
            产品类型:
            <el-select v-model="selectedMessage.Product" placeholder="请选择产品" style="width: 100px;">
                <el-option v-for="product in stateInfo.AllProducts" :key="product.Text" :value="product.Text" :label="product.Text"></el-option>
            </el-select>                                      
        </span>
        <span class="divcontainer_sub2">
            产品名称：
            <input v-model="ProductName" disabled class="product_input" style="width: 250px;">
                
            </input>
        </span>
        <span class="divcontainer_sub2" >
            产品物料编码：
            <input v-model="ProductCode" disabled class="product_input">
                
            </input>
        </span>
      </div>
      <div class="divcontainer_sub1">
        <span class="divcontainer_sub2">
            工单:
            <el-select v-model="selectedMessage.Order" placeholder="请选择工单" style="width: 150px;">
                <el-option v-for="order in stateInfo.AllOrders" :key="order.OrderCode" :value="order.OrderCode" :label="order.OrderCode"></el-option>
            </el-select>     
            <el-popconfirm title="确定启用此工单吗？" @confirm="TurnOnOrder" >
                <template #reference>
                    <el-button type="primary" style="margin-left: 20px;">启用</el-button>
                </template>
            </el-popconfirm>    
            <el-button type="primary" @click="goToExternalPage">
                 一键跳转工单看板
            </el-button>                           
        </span>
      </div>
    </div>
    <div class="divcontainer">
        <div class="divcontainer_sub1">
            <header >
                <h1 style="text-align: center;">工艺路线</h1>
            </header>
            <div >
                <table class="info-table">
                <thead>
                    <tr>
                    <th>工序编码</th>
                    <th>工序名称</th>
                    
                </tr>
                </thead>    
                <tbody>
                    <tr v-for="(Op, index) in stateInfo.AllOperations" :key="index">
                        <td>{{ Op.OperationCode }}</td>
                        <td>{{ Op.OperationName }}</td>
                        
                    </tr>
                </tbody>
                </table>
            </div>
        </div>
        <div class="divcontainer_sub1">
            <header >
                <h1 style="text-align: center;">物料BOM</h1>
            </header>
            <div >
                <table class="info-table">
                <thead>
                    <tr>
                    <th>上料工序</th>
                    <th>物料编码</th>
                    <th>物料名称</th>
                    <th>物料正则</th>
                </tr>
                </thead>    
                <tbody>
                    <tr v-for="(bom, index) in stateInfo.AllProductBoms" :key="index">
                        <td>{{ bom.OperationCode }}</td>
                        <td>{{ bom.AssemblyMaterialCode }}</td>
                        <td>{{ bom.AssemblyMaterialName}}</td>
                        <td>{{ bom.AssemblyMaterialRegex}}</td>
                    </tr>
                </tbody>
                </table>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts" name="工单快速创建">
import {ref, reactive, watch, onMounted, getCurrentInstance, defineAsyncComponent, nextTick,computed, onUnmounted} from 'vue';
import other from '/@/utils/other';
import request from '/@/utils/request';
import { ElMessage } from 'element-plus';


const stateInfo = reactive({
    //产线信息
    AllProducts: [] as any[],
    AllOrders: [] as any[],
    AllOperations: [] as any[],
    AllProductBoms: [] as any[],
})

interface SelectedMessage {  
    Product: null | string; 
    Order: null | string; 
} 

const selectedMessage = ref<SelectedMessage>({  
    Product: null, 
    Order: null,
     
});

const ProductName = ref('');
const ProductCode = ref('');

// 页面加载时
onMounted(() => {
    other.getSelectList('/api/BaseInformation/Product/GetProducts',[],false).then(x=>{stateInfo.AllProducts = x});
    
});

//选择产品号后
watch(()=>selectedMessage.value.Product, (oldValue,newValue)=>{
    
     request({
        url: '/api/BaseInformation/Product/GetProductInfoByProductVersion',
        method: 'post',
        data: {
            'ProductVersion':selectedMessage.value.Product,
        }
    }).then(res => {
        // console.log('dd',res)
       ProductName.value = res.ProductName;
       ProductCode.value = res.ProductCode;

        request({
            url: '/api/BaseInformation/Order_Model/GetOrders',
            method: 'post',
            data: {
                'PMCode':res.ProductCode,
            }
        }).then(res2 => {
            // console.log('or',res2),
           stateInfo.AllOrders =res2
        })

    })

   

})

//选择工单后
watch(()=>selectedMessage.value.Order,(oldValue,newValue)=>{
    request({
            url: '/api/BaseInformation/RouteOperation/GetOperationByOrder',
            method: 'post',
            data: {
                'orderCode':selectedMessage.value.Order,
            } 
            }).then(res=>{
                stateInfo.AllOperations = res;
                //console.log('sk',SkipOps.value );
            })
    request({
            url: '/api/BaseInformation/ProductBOM/GetProductBOMByOrder',
            method: 'post',
            data: {
                'PMCode':selectedMessage.value.Order,
            } 
            }).then(res=>{
                stateInfo.AllProductBoms = res;
                //console.log('sk',SkipOps.value );
            })
})

//启用工单
const TurnOnOrder = ()=>{
    request({
            url: '/api/BaseInformation/Order_Model/TurnOnOrder',
            method: 'post',
            data: {
                'PMCode':selectedMessage.value.Order,
            } 
            }).then(res=>{
                if(res.Success==true){
                    ElMessage.success(res.Mesg);
                }
                else{
                    ElMessage.error(res.Mesg);
                }
                //console.log('sk',SkipOps.value );
            })
}

const goToExternalPage = () => {
  window.location.href = 'http://172.16.1.3:10000/z80rpzwrj053'
}

</script>

<style scoped lang="scss">

.divcontainer { 
    display: flex;  
    align-items: flex-start;
    //justify-content: space-between, left; /* 在元素之间添加等量的空间 */ 
    //margin-right: 50px; 
    width: auto;
    margin-top: 10px;
} 
.divcontainer_sub1 {  //.divcontainer11
    //display: flex;  
    align-items: center;
    //justify-content: space-between, left; /* 在元素之间添加等量的空间 */ 
    width: 100%; 
    margin-left: 10px;
    margin-right: 10px;
    box-shadow: 0px 0px 10px 5px rgba(34, 161, 161, 0.7); /* 黄色发光 */
    padding: 10px;
}

.divcontainer_sub2{
    padding: 10px;
}

.product_input{
    width: 150px;
    height: 30px;
}
.info-table{
    margin-top: 10px;
    width: 100%;
    border-collapse: collapse;
}

.info-table th,
.info-table td{
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
}

.info-table th{
    background-color: #f2f2f2;
}

</style>